@import '../_common/basic-mobile-style.scss';

// 移动端竖屏互动样式
@mixin generate-skin-basic-iar-portrait-style($--skin-configs) {
  .pws-iar-pendant-text {
    color: #fff !important;
  }

  // 处理所有竖屏互动默认按钮
  .plv-iar-default-btn {
    background: map.get($--skin-configs, 'primary-color') !important;
  }

  // 快速问答
  .plv-iar-quick-answer-default__btn {
    background-color: map.get($--skin-configs, 'primary-color') !important;
  }

  // --------- 商品库 --------- //
  .pws-portrait-iar-product-title-number {
    color: #F15D5D !important;
  }
  .pws-iar-product-list-button {
    background-color: #F15D5D !important;
  }
  .pws-iar-product-list-cover-number {
    background-color: map.get($--skin-configs, 'primary-color') !important;
  }
  .pws-iar-product-list-number {
    background-color: map.get($--skin-configs, 'primary-color') !important;
  }
  .pws-iar-product-job-detail {
    .plv-iar-product-job__btn {
      background-color: map.get($--skin-configs, 'primary-color') !important;
    }
  }
  .pws-iar-product__item__btn {
    .plv-iar-product__item__job__detail {
      color: #F15D5D !important;
      border-color: #F15D5D !important;
    }
  }

  // --------- 商品库气泡推送 --------- //
  .plv-iar-product-bubble__content__job-group__detail {
    color: map.get($--skin-configs, 'primary-color') !important;
    border-color: map.get($--skin-configs, 'primary-color') !important;
  }
}

// 移动端竖屏覆盖移动端横屏互动样式
@mixin cover-portrait-skin-basic-iar-mobile-style($--skin-configs) {
  @include generate-skin-basic-iar-portrait-style($--skin-configs);

  // --------- 问答 (以横屏白色皮肤为基准)--------- //
  .pws-iar-qa-filter {
    background-color: #fff !important;
    border-bottom-color: #fff !important;
  }
  .pws-iar-qa-filter-desc {
    color: #666666 !important;
  }
  .pws-iar-qa-new-msg-button {
    color: #fff !important;
    background-color: rgba(map.get($--skin-basic-configs, 'primary-color'), 0.85) !important;
  }
  .pws-iar-qa-select {
    color: #666666 !important;
  }
  .pws-iar-icon-qa-ask-emotion-icon {
    display: flex;
    align-items: center;
    path {
      fill: #666666 !important;
    }
  }

  .pws-iar-mobile-qa-body {
    background-color: #F4F4F4 !important;
  }
  .pws-iar-mobile-qa-no-data {
    color: rgba(#666666, 0.6) !important;
    background-color: #F4F4F4 !important;
    &::before {
      background-image: url(map.get($--skin-configs, 'iar-mobile-qa-no-data:icon-image')) !important;
    }
  }
  .pws-iar-mobile-qa-ask-entry {
    background-image: url(map.get($--skin-configs, 'iar-mobile-qa-ask-entry:icon-image')) !important;
    background-size: 100% 100%;
  }
  .pws-iar-mobile-qa-item {
    color: #666666 !important;
    background-color: #fff !important;
  }
  .pws-iar-mobile-qa-item-question,
  .pws-iar-mobile-qa-item-answer {
    background: none !important;
  }
  .pws-iar-mobile-qa-item-more {
    color: #666666 !important;
    background-color: #fff !important;
    .pws-iar-multiline-btn-shadow {
      background: linear-gradient(270deg, #fff 0%, rgba(225, 238, 252, 0) 100%) !important;
    }
    .pws-iar-multiline-btn-text {
      color: #666666 !important;
    }
    .pws-iar-multiline-btn-arrow {
      border-color: #666666 !important;
    }
  }
  .pws-iar-mobile-qa-item-data {
    color: rgba(#666666, 0.6) !important;
  }
  .pws-iar-mobile-qa-item-answer-border {
    border-color: #f4f4f4 !important;
  }
  .pws-iar-mobile-no-more {
    color: rgba(#666666, 0.6) !important;
  }
  .pws-iar-mobile-qa-ask {
    background-color: #fff !important;
  }
  .pws-iar-mobile-qa-ask-input-textarea {
    color: #666666 !important;
    background-color: rgba(#000, 0.05) !important;
    &::placeholder {
      color: inherit !important;
      opacity: 0.5;
    }
  }
  .pws-iar-mobile-qa-ask-emotion-icon {
    color: #666666 !important;
    filter: none;
  }
  .pws-iar-mobile-qa-ask-send-button {
    color: #FFA611 !important;
  }


  // --------- 商品库 (以横屏黑色皮肤为基准)--------- //
  .pws-iar-product-list-wrap {
    background-color: #fff !important;
  }
  .pws-iar-product-list-content {
    background-color: #fff !important;
    &::-webkit-scrollbar-thumb {
      background-color: #E5E6EB !important;
    }
  }
  .pws-iar-product-list-total {
    color: #adadc0 !important;
    background-color: inherit !important;
  }
  .pws-iar-icon-product-list-icon {
    path {
      fill: #858585;
    }
  }
  .pws-iar-icon-product-list-icon-recruitment {
    path {
      fill: #858585;
    }
  }
  .pws-iar-product-list-total-highlight {
    color: #5394f6 !important;
  }
  .pws-iar-product-list-name {
    color: #333 !important;
  }
  .pws-iar-product-list-number {
    color: #fff !important;
  }
  .plv-iar-product__item {
    color: #333 !important;
  }
  .pws-iar-product-list-desc-label {
    color: #adadc0 !important;
    opacity: 0.8;
  }
  .pws-iar-product-list-desc {
    color: #999 !important;
    opacity: 1;
  }
  .pws-iar-product-list-label {
    height: 14px !important;
    padding: unset !important;
    font-weight: 500;
    line-height: 14px !important;
    color: #F15D5D !important;
    background-color: #fff !important;
    border: 0.5px solid rgba(#FF6363, 0.6);
    border-radius: 2px;
  }
  .pws-iar-product-list-empty-text {
    color: #adadc0 !important;
  }
  .pws-iar-product-list-empty-img {
    background-image: url(map.get($--skin-configs, 'iar-product-list-empty:icon-image')) !important;
  }
  .pws-iar-product-list-item {
    border-bottom-color: rgba(#fff, 0.1) !important;
  }
  // ---------- 订单 --------- //
  .pws-iar-order-enter {
    color: #545C6B !important;
  }
}


/**
 * 生成皮肤的 basic portrait 端 样式
 * 规则：默认 pws-portrait-* , 部分覆盖 pws-mobile-*
 * 在 generate-skin-basic-mobile-style 之后调用
 */
@mixin generate-skin-basic-portrait-style($--skin-configs) {
  @include generate-skin-basic-mobile-style($--skin-configs);

  .pws-skin-#{map.get($--skin-configs, 'skin-type')} {
    @include cover-portrait-skin-basic-iar-mobile-style($--skin-configs);

    // 播放器配置选择项
    .pws-portrait-player-control__select-item {
      color: map.get($--skin-configs, 'portrait-player-control-select-item:text-color') !important;
      border-color: map.get($--skin-configs, 'portrait-player-control-select-item:border-color') !important;
    }
    .pws-portrait-player-control__select-item--activity {
      color: map.get($--skin-configs, 'portrait-player-control-select-item--activity:text-color') !important;
      border-color: map.get($--skin-configs, 'portrait-player-control-select-item--activity:border-color') !important;
    }

    // 回放列表
    .pws-mobile-playback-list-title, .pws-mobile-playback-list-tips {
      color: map.get($--skin-configs, 'portrait-playback-list-title:text-color') !important;
    }
    .pws-mobile-playback-list-item.is-active {
      .pws-mobile-playback-list-title,
      .pws-mobile-playback-list-time {
        color: map.get($--skin-configs, 'primary-color') !important;
      }
    }

    // 回放章节
    .pws-chapter-item {
      color: map.get($--skin-configs, 'portrait-chapter-item:text-color') !important;
      border-bottom-color: rgba($--color-white, 0.1);
      &.is-active {
        color: map.get($--skin-configs, 'primary-color') !important;
      }
    }
    // 打赏
    .pws-mobile-donate-panel {
      color: map.get($--skin-configs, 'primary-color') !important;
      background-color: #2b2c35 !important;
    }
    .pws-mobile-donate-good-name {
      color: #FFFFFF !important;
    }
    .pws-mobile-donate-good-price {
      color: rgba(255, 255, 255, 0.5) !important
    }
    .pws-mobile-donate-good-item.is-active {
      background-color: #41424a !important;
      border-color: #adadc0 !important;
    }
    .pws-mobile-donate-carousel-indicator-item {
      background-color: rgba(#fff, 0.5) !important;
      &.is-active {
        background-color: map.get($--skin-configs, 'primary-color') !important;
      }
    }

    // 页脚
    .pws-mobile-page-footer {
      color: #fff !important;
    }

    // 预约按钮
    .pws-mobile-live-booking-button {
      background-color: map.get($--skin-configs, 'primary-color') !important;
    }

    // 表情面板
    .pws-mobile-emotion-picker {
      background-color: #262523 !important;
    }
    .pws-mobile-emotion-picker-tabs, .pws-mobile-emotion-picker-tabs-active {
      background-color: hsla(0, 0%, 100%, .1) !important;
    }
    .pws-mobile-emotion-picker-tabs-item {
      color: hsla(0, 0%, 100%, .5) !important;
    }
    .pws-mobile-emotion-picker-tabs-item.is-active {
      color: #fff !important;
      background-color: #666 !important;
      border-radius: 16px;
    }
    .pws-mobile-emotion-picker-del-button {
      color: #fff !important;
      background-color: hsla(0, 0%, 100%, .1) !important;
    }

    // 竖屏 tab 激活状态
    .pws-portrait-normal-tabs__item--active {
      color: map.get($--skin-configs, 'primary-color') !important;
      &::after {
        background: map.get($--skin-configs, 'primary-color') !important;
      }
    }
  }
}
